<template>
  <TableQuery
    :query="tableQuery"
    :loadTableList="loadTableList"
    :clearQuery="clearQuery"
    :queryFormHeaders="queryFormHeaders"
    :removeQueryField="removeQueryField"
  >
  </TableQuery>
</template>

<script lang="ts" setup>
import TableQuery from '@/components/base/table/TableQuery.vue';
import {
  computed, defineProps, withDefaults, watch, ref,
} from 'vue';

// 接收父组件参数
interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  query: Record<string, any>, // 查询表单对象
  loadTableList: () => void, // 重新加载表格
  clearQuery: () => void // 清空查询条件
  removeQueryField: (key: string) => void // 移除查询条件中的某个元素
}

const props = withDefaults(defineProps<Props>(), {
  query: () => ({}), // 返回空对象
});
// 定义查询表单对象，避免直接使用props导致eslint报错
const tableQuery = computed(() => props.query);
// 定义查询表单的内容
const queryFormHeaders = [ // 查询表单
  {
    prop: 'name',
    label: '消纳场名称',
    type: 'string',
    show: true,
  },
  {
    label: '坐标',
    prop: 'coorDinate',
    type: 'number',
    show: true,
  },
  {
    label: '边界',
    prop: 'bounDary',
    type: 'number',
    show: true,
  },
  {
    label: '方量',
    prop: 'cubicMeter',
    type: 'number',
    show: true,
  },
];

const createTimeQuery = ref('');// 定义注册日期范围的变量，按照日历插件特点，该对象应该是数组
// const departmentId=ref("");
// 因为根据日历插件的特性，createTimeQueryOfBegin和createTimeQueryOfEnd必须同时存在，因此只要监听一个 就可以。
// 注意，监听对象中的属性，只能用这种watch的写法。不能使用写法：watch(props.query.createTimeQueryOfBegin,(newVal:string,oldVal:string)=>{});
watch(() => tableQuery.value.createTimeQueryOfBegin, (newVal: string, oldVal: string) => {
  if ((typeof newVal === 'undefined' || newVal === '') && oldVal !== '') { // 如果当前值不存在并且上一个值不为空，则说明日期被清空了
    createTimeQuery.value = '';
  }
});
</script>

<style scoped>

</style>
